<template>
  <div class>
    <!-- <i class="iconfont iconchaxun" @click="show = !show"></i> -->
    <!-- iconsousuo -->
    <transition name="fade" mode="out-in">
      <el-select
        v-model="value"
        size="mini"
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :remote-method="remoteMethod"
        :loading="loading"
      >
       <i slot="prefix" class="el-input__icon el-icon-search"></i>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <router-link style="display:block;height:100%;width:100%;" :to="item.value">{{item.label}}</router-link>
        </el-option>
      </el-select>
    </transition>
  </div>
</template>

<script>
import { getFunctionListByUserId } from "@/functions/menuList";
export default {
  data() {
    return {
      show: false,
      options: [],
      value: [],
      list: [],
      loading: false,
      states: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let user = sessionStorage.getItem("user");
      let userId = JSON.parse(user).userId;
      getFunctionListByUserId({ userId }).then(res => {
        if (res.retHead.code == "0000000") {
          this.states = [];
          this.deepOut(res.retBody);
        }
      });
    },
    deepOut(v) {
      v.forEach(item => {
        if (item.children.length > 0) {
          this.deepOut(item.children);
        } else {
          this.states.push(item);
        }
      });
      this.list = this.states.map(item => {
        return { value: item.functionUrl, label: item.functionName };
      });
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        // setTimeout(() => {
        this.loading = false;
        this.options = this.list.filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
        // }, 200);
      } else {
        this.options = [];
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-select-dropdown__item {
  padding: 0;
  a {
    padding: 0 20px;
  }
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>